<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
  <style>
    body {
      height: 100vh;
    }

    .login {
      height: 100%;
      background-size: cover !important;
      background: url(./image/bg.jpg) no-repeat;
      position: relative;
    }

    .login_box {
      width: 300px;
      background-color: white;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 10px;
      padding: 40px 40px 20px 40px;
    }

    .layui-input-block {
      margin-left: 0px;
    }

    .login-title {
      text-align: center;
      margin-bottom: 20px;
      font-size: 26px;
    }
  </style>
</head>
<body>
  <div class="login">
    <div class="login_box">
      <form class="layui-form">
        <h3 class="login-title">健身房管理系统</h3>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <input type="text" name="tel" lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <input type="password" name="pwd" lay-verify="required|pass" placeholder="请输入密码" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">立即提交</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/js-md5@0.8.3/src/md5.min.js"></script>
<script src="./layui/layui.js"></script>
<script type="module">
  import { managerLogin } from './api/login.js'
  // console.log(request);
  // ['layer', 'form'] 注册插件 在函数中使用
  // layui.use(['layer', 'form'], function () {
  //   var layer = layui.layer;
  //   var form = layui.form;

  //   layer.msg('登录成功');
  // })

  // 上述操作可以直接使用  // layui.form.msg('登录成功');
  // console.log(layui);

  // 自定义密码验证
  layui.form.verify({
    pass: [
      /^[\S]{6,12}$/
      , '密码必须6到12位，且不能出现空格'
    ]
  })

  // 表单提交
  layui.form.on('submit(login)', function (data) {
    // 获取表单的value
    // console.log(data.field);
    // 发送ajax请求
    const params = {
      tel: data.field.tel,
      pwd: md5(data.field.pwd)
    }
    managerLogin(params).then(res => {
      console.log(res);
      const { code, msg, data } = res
      if (code === '200') {
        localStorage.setItem('token', data.token)
        localStorage.setItem('userId',data.userId)
        window.location.href = './view/home.html'
      } else if (code === '0') {
        layui.layer.msg(msg)
      }
    })
    // 阻止表单跳转
    return false;
  })
</script>

</html>